<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <title>Xiaohuan Chat 登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        input,
        button {
            background: transparent;
            border: 0;
            outline: none;
        }

        body {
            height: 100vh;
            /* background: linear-gradient(#141e30, #243b55); 图像渐变 */
            background-image: url("/img/background.jpg");
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #03e9f4;
        }

        .loginBox {
            width: 400px;
            height: 417px; /*364 */
            /* background-color: #0c1622; */
            background-image: linear-gradient(to right , #7A88FF, #ff3dab); /* 登录表单图像渐变 */
            margin: 100px auto;
            border-radius: 10px;
            box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
            padding: 40px;
            box-sizing: border-box;
        }

        h2 {
            text-align: center;
            color: aliceblue;
            margin-bottom: 30px;
            font-family: 'Courier New', Courier, monospace;
        }

        .item {
            height: 45px;
            border-bottom: 1px solid #fff;
            margin-bottom: 40px;
            position: relative;
        }

        .item input {
            width: 100%;
            height: 100%;
            color: #fff;
            padding-top: 20px;
            box-sizing: border-box;
        }

        .item input:focus+label,
        .item input:valid+label {
            top: 0px;
            font-size: 2px;
        }

        .item label {
            position: absolute;
            left: 0;
            top: 12px;
            transition: all 0.5s linear;
        }


        .btn {
            background: linear-gradient(#aa0000, #aa557f);
            padding: 10px 20px;
            margin-top: 30px;
            color: #03e9f4;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 2px;
            left: 35%;
        }

        .btn:hover {

            border-radius: 5px;
            color: #fff;
            background: #03e9f4;
            box-shadow: 0 0 5px 0 #03e9f4,
            0 0 25px 0 #03e9f4,
            0 0 50px 0 #03e9f4,
            0 0 100px 0 #03e9f4;
            transition: all 1s linear;
        }

        .btn>span {
            position: absolute;
        }

        .btn>span:nth-child(1) {
            width: 100%;
            height: 2px;
            background: -webkit-linear-gradient(left, transparent, #03e9f4);
            left: -100%;
            top: 0px;
            animation: line1 1s linear infinite;
        }

        @keyframes line1 {

            50%,
            100% {
                left: 100%;
            }
        }

        .btn>span:nth-child(2) {
            width: 2px;
            height: 100%;
            background: -webkit-linear-gradient(top, transparent, #03e9f4);
            right: 0px;
            top: -100%;
            animation: line2 1s 0.25s linear infinite;
        }

        @keyframes line2 {

            50%,
            100% {
                top: 100%;
            }
        }

        .btn>span:nth-child(3) {
            width: 100%;
            height: 2px;
            background: -webkit-linear-gradient(left, #03e9f4, transparent);
            left: 100%;
            bottom: 0px;
            animation: line3 1s 0.75s linear infinite;
        }

        @keyframes line3 {

            50%,
            100% {
                left: -100%;
            }
        }

        .btn>span:nth-child(4) {
            width: 2px;
            height: 100%;
            background: -webkit-linear-gradient(top, transparent, #03e9f4);
            left: 0px;
            top: 100%;
            animation: line4 1s 1s linear infinite;
        }

        @keyframes line4 {

            50%,
            100% {
                top: -100%;
            }
        }


        input[type = "checkbox"]{
            width: 16px;
            height: 16px;
            vertical-align: middle;
            -webkit-appearance: none; /*清除默认样式*/
            border: 1px solid #D1D1D1;
        }
        input[type = "checkbox"]:checked{
            background-image:url("/img/checkbox.jpg");
            background-size: cover;
        }

        #isRemember {
            position: fixed;
            bottom: 0;
        }
    </style>
</head>

<body>
<div class="loginBox">
    <h2>Xiaohuan Chat<br>登录</h2>
    <form action="/authentication/form" method="post"> <!-- 表单post提交 -->
        <div class="item">
            <input id="userName" type="text" name="userName" required>
            <label for=''>userName</label>
        </div>
        <div class="item">
            <input id="userPwd" type="password" name="userPwd" required>
            <label for=''>password</label>
        </div>
        <div class="item">
            <input type="text" name="captchaCode" id="captchaCode" style="width: 50%"/>
            <!-- 加载时就发起请求-->
            <img src="/kaptcha" id="kaptcha" width="110px" height="40px" style="float: right"/>
            <label>验证码</label>
        </div>

        <div class="rememberme">
            <label>Remember me</label>
            <input id="RememberMe" type="checkbox"  name="rememberMe"/>
        </div>
        <button style="margin-right: 400px;" class="btn">LOGIN
            <span>→</span>
            <span></span>
            <span></span>
            <span></span>
        </button>
        <div>
            <p style="float: left;">Don't have account?</p>
            <a href="register.html" style="float: right; height: 25px; background: linear-gradient(#aa0000, #aa557f)">REGISTER</a>
        </div>
    </form>
    <div id="isRemember">
        <p style="margin-right: 100px;display: inline-block;">Just logged in ?</p>
        <a href="/sys/toIndex" style="float: right; height: 25px; background: linear-gradient(#ff5500, #00ff00)">Check without login</a>
    </div>
</div>

<script src="/js/JQuerym.js"></script>
<script type="text/javascript">
    //点击刷新
    $(function () {
        var kaptchaImg = $("#kaptcha");

        kaptchaImg.click(function () {
            //向后台发起请求
            kaptchaImg.get(0).src = "/kaptcha?" + Math.floor(Math.random() * 100); //随机数表明每次请求不相同
        });
    })

    //如果是注册后跳转该页面，自动填入注册的用户名和密码
    //字符串裁剪slice,-1没有找到
    var data = decodeURI(document.URL);
    console.log(data);
    if(data.indexOf('?') != -1) {
        data = data.slice(data.indexOf('?') + 1);
        var arr = data.split('&');
        //只有username和password，简单处理
        var username = arr[0].slice(arr[0].indexOf('=') + 1);
        // var password = arr[1].slice(arr[1].indexOf('=') + 1);
        // password = window.atob(password);
        var isAuto =  window.confirm("是否需要填入刚刚注册的用户名？");
        if(isAuto) {
            console.log(username );
            //自动填充
            $("#userName").get(0).value = username;
            // $("#userPwd").get(0).value = password;
            $("#RememberMe").get(0).checked = true;
        }
    }
</script>
</body>

</html>